<!-- 报警统计图  -->
<template>
  <div id="alarm-count-chart-main">
    <div ref="alarmCountChartContainer" class="alarm-count-chart-container"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
import FullScreenMonitor from "@/api/FullScreenMonitor";
import {apiResult} from "@/libs/util";
export default {
  name:"AlarmCountChart",
  data(){
    return{
      api: new FullScreenMonitor,
      chartOption:{
        tooltip: {
          trigger: "item",
          formatter: "{b}<br/>{c}",
        },
        xAxis: {
          //name:'报警类型',
          nameLocation: 'start',
          nameTextStyle:{
            color: '#FFFFFF',
            fontSize:10
          },
          type: 'category',
          //boundaryGap: ['20%', '20%'],
          show:true,
/*          axisLine:{
            show:false,
            lineStyle:{
              color:'#ffffff'
            }
          },*/
          splitLine: {
            show: false
          }, //坐标轴在 grid 区域中的分隔线
/*          axisLabel: {
            show: false
          }, *///坐标轴刻度标签
          axisTick: {
            show: false
          }, //坐标轴刻度
          axisLine: {
            show: false
          }, //坐标轴轴线
/*          minorTick:{
            show:true,
          },*/
          axisLabel:{
            show:true,
            color:'#ffffff',
          },

          data: ['SOS', '人脸识别', '车牌识别']

        },
        yAxis: {
          type: 'value',
          axisLabel:{
            show:true,
            color:'#FFFFFF',
            fontStyle:{
              fontSize: 9,
            }
          },

/*          axisLine:{
            //show:true,
            lineStyle:{
              color:'#FFFFFF'
            }
          },*/

          splitLine: {
            show: false
          }, //坐标轴在 grid 区域中的分隔线
/*          axisLabel: {
            show: false
          }, //坐标轴刻度标签*/
          axisTick: {
            show: false
          }, //坐标轴刻度
          axisLine: {
            show: false
          }, //坐标轴轴线
        },
        title: {
          text: this.$t('statistics_alarm'),//'报警统计',
          left: 'center',
          top: 'top',
          textStyle:{
            color: '#FFFFFF',
            fontSize: 18
          },
        },

        series: [
          {
            name: this.$t('statistics_alarm'),//'报警统计',
            type: 'bar',
            data: [
              {
                value:13,
                itemStyle: {
                  color: '#e30c0c'
                }
              },
              {
                value:71,
                itemStyle: {
                  color: '#0227c1'
                }
              },
              {
                value:42,
                itemStyle: {
                  color: '#118c11'
                }
              },
            ],
            //colorBy:'data',
            //symbolSize:9,
/*            lineStyle:{
              color:'#e30c0c',
            },*/
          }
        ]
      }
    }
  },
  methods:{
    start(){
      let mychart = echarts.init(this.$refs.alarmCountChartContainer);
      mychart.setOption(this.chartOption);
    },
    getData(){
      const that=this;
      this.api.getDeviceAlarmCountByCate().then(res=>{
        apiResult(res.data,false,result=>{
          let chartData = [];
          let style=[];
          style.push({color: '#118c11'})
          style.push({color: '#4c24eb'})
          style.push({color: '#e30c0c'})
          style.push({color: '#8845f8'})
          let xAxisData = [];
          //console.log(">>>>>>AlarmCountChart.getData: data=%o",res.data.data);
          if (!!result.data && result.data.length > 0){
            for(let i in result.data){
              chartData.push({
                value: result.data[i].value,
                name: this.$t("alarm_type_" + result.data[i].intId),//res.data.data[i].name,
                itemStyle:style[i]})
              //xAxisData.push(res.data.data[i].name);
              xAxisData.push(this.$t("alarm_type_" + result.data[i].intId))
            }
            that.chartOption.series[0].data=chartData;
            that.chartOption.xAxis.data=xAxisData;
          }
          //console.log(">>>>>>AlarmCountChart.getData: chartData=%o",chartData);
          //console.log(">>>>>>AlarmCountChart.getData: chartOption=%o",that.chartOption);
          that.start();
        })

      })
    }
  },
  mounted() {
    //this.chartOption.xAxis.data = []

    this.getData();
  }
}
</script>
<style lang="less">
#alarm-count-chart-main{
  width: 100%;
  height: 100%;
}

.alarm-count-chart-container{
  margin-top: 20px;
  width: 100%;
  height: 100%;
}
</style>
